<template>
	<view class="page-content">
		<view class="page-top">
			<view class="page-top-o">
				<view class="page-top-l">
					<image :src="datalist.img" class="page-top-img"></image>
				</view>
				<view class="page-top-r">
					<view class="page-top-r-tit">{{datalist.title}}</view>
					<view class="page-top-r-box">
						<view class="page-top-r-team">{{datalist.group_title}}({{datalist.number}}人)</view>
						<view class="page-top-r-mon">¥{{datalist.money}}</view>
					</view>
				</view>
			</view>
			<view class="page-top-t">
				<view class="page-top-tit">
					<label class="page-top-label" @click="changecheck(checksm)">
						<text class="page-top-tit-icon">*</text>
						<image class="icon-check" :src="checksm ? check_no : check_on"></image>
						<text>同意免责声明</text>
					</label>
				</view>
				<view class="icons icon-gengduo" @click="tosm"></view>
			</view>
		</view>
		<view class="page-body">
			<!-- 服装尺寸 -->
			
			<view class="page-box">
				<view class="page-box-team">
					<image style="width: 32rpx;height:32rpx;margin-right: 20rpx;" src="/static/clockIn/chima.png">
						<view class="team-name">服装尺寸</view>
				</view>
				<image class="chicun" src="/static/clockIn/chicun.jpg"></image>
			</view>
			<!-- 队名 -->
			<view class="page-box">
				<!-- <row-Input name="队名:" type="text" :txt="teamdata.teamname"></row-Input> -->
				<view class="com-box-row">
					<view class="page-box-label">
						<view class="page-top-tit-icon">*</view>
						<view class="team-name">队名：</view>
					</view>
					<view class="page-box-label2">
						<input class="input-box" v-model="teamdata.teamname" name="input" placeholder="请输入队名" />
					</view>
				</view>
			</view>

			<!-- 队长 + 队员 -->
			<block v-for="(item,index) in teamlist" :key="index">
				<!-- 队长 -->
				<view class="page-box">
					<view v-if="item.type===1" class="page-box-team">
						<image style="width: 33rpx;height:25rpx;margin-right: 20rpx;" src="/static/clockIn/captain.png">
							<view class="team-name">队长</view>
					</view>
					<view v-else-if="item.type===2" class="page-box-team">
						<image style="width: 33rpx;height:25rpx;margin-right: 20rpx;" src="/static/clockIn/captain.png">
							<view class="team-name">队员{{index}}</view>
					</view>

					<view class="com-box-row">
						<view class="page-box-label">
							<view class="page-top-tit-icon">*</view>
							<view class="team-name">姓名：</view>
						</view>
						<view class="page-box-label2">
							<input class="input-box" v-model="item.name" name="input" placeholder="请输入姓名" />
						</view>
					</view>
					
					<!--姓别-->
					<view class="com-box-row">
						<view class="page-box-label">
							<view class="page-top-tit-icon">*</view>
							<view class="team-name">性别：</view>
						</view>
						<view class="page-box-label3" @tap="toggleTab('selectxb',index)">
							<view class="result" :style="{color:item.gender==='请选择性别'?'#999':'#333'}">{{item.gender}}</view>
							<view class="icon-b icons icon-gengduo"></view>
						</view>
					</view>
					
					<view class="com-box-row">
						<view class="page-box-label">
							<view class="page-top-tit-icon">*</view>
							<view class="team-name">电话：</view>
						</view>
						<view class="page-box-label2">
							<input class="input-box" v-model="item.mobile" name="input" placeholder="请输入电话" />
						</view>
					</view>
					<view class="com-box-row">
						<view class="page-box-label">
							<view class="page-top-tit-icon">*</view>
							<view class="team-name">身份证：</view>
						</view>
						<view class="page-box-label2">
							<input class="input-box" v-model="item.identity" name="input" placeholder="请输入身份证" />
						</view>
					</view>
					<view class="com-box-row">
						<view class="page-box-label">
							<view class="page-top-tit-icon">*</view>
							<view class="team-name">紧急联系人：</view>
						</view>
						<view class="page-box-label2">
							<input class="input-box" v-model="item.urgency_name" name="input" placeholder="请输入紧急联系人" />
						</view>
					</view>
					<view class="com-box-row">
						<view class="page-box-label">
							<view class="page-top-tit-icon">*</view>
							<view class="team-name">紧急联系人电话：</view>
						</view>
						<view class="page-box-label2">
							<input class="input-box" v-model="item.urgency_mobile" name="input" placeholder="请输入紧急联系人电话" />
						</view>
					</view>
					

					<!--服装尺寸-->
					<view class="com-box-row">
						<view class="page-box-label">
							<view class="page-top-tit-icon">*</view>
							<view class="team-name">服装尺寸：</view>
						</view>
						<view class="page-box-label3" @tap="toggleTab('selectxl',index)">
							<view class="result" :style="{color:item.size==='请选择服装尺寸'?'#999':'#333'}">{{item.size}}</view>
							<view class="icon-b icons icon-gengduo"></view>
						</view>
					</view>
				</view>
				<!-- <view class="page-box">
						<view class="page-box-team">
							<image style="width: 33rpx;height:25rpx;margin-right: 20rpx;" src="/static/clockIn/captain.png">
								<view class="team-name">队员{{index+1}}</view>
						</view>
						<row-Input name="姓名:" type="text" :txt="item.name" placeholder=""></row-Input>
						<row-Input name="电话:" type="number" :txt="item.mobile" placeholder=""></row-Input>
						<row-Input name="身份证:" type="idcard" :txt="item.identity" placeholder=""></row-Input> -->
				<!--服装尺寸-->
				<!-- <view class="com-box-row">
							<view class="page-box-label">
								<view class="page-top-tit-icon">*</view>
								<view class="team-name">服装尺寸：</view>
							</view>
							<view class="page-box-label3" @tap="toggleTab('selectxl',index)">
								<view class="result">{{item.size}}</view>
								<view class="icon-b icons icon-gengduo"></view>
							</view>
						</view>
					</view> -->
			</block>
			<w-picker mode="selector" defaultVal="男" @confirm="onSelctXB" ref="selectxb" themeColor="#f00" :selectList="selectList1"></w-picker>
			<w-picker mode="selector" defaultVal="成人 L" @confirm="onSelctXL" ref="selectxl" themeColor="#f00"
				:selectList="label1"></w-picker>
		</view>
		<view class="page-foot" @click="todetail(teamdata)" v-if="signallsta==='1'"
			:style="{color:signallsta==='1'?'#fff':'#999',background:signallsta==='1'?'#02BB6F':'#ddd'}">
			下一步</view>
		<view class="page-foot" v-else-if="signallsta==='2'"
			:style="{color:signallsta==='2'?'#fff':'#999',background:signallsta==='1'?'#02BB6F':'#ddd'}">
			下一步</view>
	</view>
</template>

<script>
	import wPicker from "@/components/w-picker/w-picker.vue"
	import rowInput from '@/pages/signUp/components/row_input.vue'
	import {
		getgameinfos, //赛事详情
		getgamegroupfroms, //获取组别表单
		submitgames //提交赛事用户信息【队伍信息填写完请求】
	} from '@/common/api.js'
	export default {
		components: {
			wPicker,
			rowInput
		},
		data() {
			return {
				selecl_num: '', //定位下拉框
				checksm: true, //默认单选
				datalist: {
					img: '',
					tit: '2021春季城市穿越赛春季城市穿越赛春季城市穿越赛春季城市穿越赛',
					team: '成年组',
					num: '5',
					money: '345'
				},
				check_no: '/static/clockIn/icon-check.png',
				check_on: '/static/clockIn/icon-check-on.png',
				selectList1: [{
					label: "男",
					value: 1
				}, {
					label: "女",
					value: 2
				}],
				label1: [{
					label: "成人 S",
					value: 1
				}, {
					label: "成人 M",
					value: 2
				}, {
					label: "成人 L",
					value: 3
				}, {
					label: "成人 XL",
					value: 4
				}, {
					label: "成人 XXL",
					value: 5
				}, {
					label: "成人 XXXL",
					value: 6
				}, {
					label: "儿童 S",
					value: 7
				}, {
					label: "儿童 M",
					value: 8
				}, {
					label: "儿童 L",
					value: 9
				}, {
					label: "儿童 XL",
					value: 10
				}, {
					label: "儿童 XXL",
					value: 11
				}, {
					label: "儿童 XXXL",
					value: 12
				}],
				teamdata: {
					game_id: '',
					teamname: '',
					group_id: '',
					data: []
				},
				teamlist: [],
				signallsta: '1'
			}
		},
		onLoad(option) {
			console.log(222, option)
			if (option.item) {
				let item = JSON.parse(option.item)
				this.teamdata.game_id = option.tp_id;
				this.teamdata.group_id = item.id;
				//this.datalist.teamname  = item.title;
				//this.datalist.number  = item.number;
				//this.datalist.money  = item.money;
			}
		},
		onShow() {
			this.getdata();
		},
		methods: {
			getdata() {
				getgameinfos({id:this.teamdata.game_id}).then(res => {
					this.datalist.title = res.data.title
				})
				getgamegroupfroms({
					group_id: this.teamdata.group_id
				}).then(res => {
					this.teamlist = res.data.data;
					this.datalist = res.data.title;
					if (this.teamlist && this.teamlist.length > 0) {
						this.teamlist.forEach(item => {
							this.$set(item, 'size', '请选择服装尺寸')
							this.$set(item, 'gender', '请选择性别')
						})
					}
				})
			},
			async todetail(row) {
				/* this.teamlist = [{
						title: "队长",
						name: " 阿萨德asd",
						mobile: "18512312323",
						size:'女 L',
						identity: "130928198905281793"
					},

					{
						title: "队员1",
						name: "123asd",
						size:'女 L',
						identity: "130532197901235712",
						mobile: "17700084333"
					},

					{
						title: "队员2",
						name: "123的asd",
						identity: "610523198305134774",
						mobile: "14305820345"
					},

					{
						title: "队员3",
						name: "asdasd",
						size:'女 L',
						identity: "500101198401133397",
						mobile: "13405920257"
					}
				] */
				let checksm = this.checksm;
				let teamdata = this.teamdata;
				let teamlist = this.teamlist;

				if (!checksm == '') {
					uni.showToast({
						title: "请阅读声明后再选中",
						icon: 'none',
						duration: 3000
					})
					return
				}
				if (teamdata.teamname === "") {
					uni.showToast({
						title: "请输入队名！",
						icon: 'none',
						duration: 3000
					})
					return
				}
				teamlist.forEach(item => {
					if (item.name === "") {
						uni.showToast({
							title: "请输入全部人员的名字！",
							icon: 'none',
							duration: 3000
						})
						return
					}
					if (item.mobole === "") {
						uni.showToast({
							title: "请输入全部人员的手机！",
							icon: 'none',
							duration: 3000
						})
						return
					}
					if (item.identity === "") {
						uni.showToast({
							title: "请输入全部人员的身份证！",
							icon: 'none',
							duration: 3000
						})
						return
					}
					if (item.size === "请选择服装尺寸") {
						uni.showToast({
							title: "请选择全部人员的服装尺寸！",
							icon: 'none',
							duration: 3000
						})
						return
					}
					if (item.gender === "请选择性别") {
						uni.showToast({
							title: "请选择全部人员的性别！",
							icon: 'none',
							duration: 3000
						})
						return
					}
					if (item.urgency_name === "") {
						uni.showToast({
							title: "请输入全部人员的紧急联系人！",
							icon: 'none',
							duration: 3000
						})
						return
					}
					if (item.urgency_mobile === "") {
						uni.showToast({
							title: "请输入全部人员的紧急联系人电话！",
							icon: 'none',
							duration: 3000
						})
						return
					}
				})
				teamdata.data = teamlist;
				submitgames({
					team_name: teamdata.teamname,
					game_id: teamdata.game_id,
					group_id: teamdata.group_id,
					data: JSON.stringify(teamdata.data)
				}).then(res => {
					if (res.code === 2000) {
						let order_id = res.data.order_id
						uni.navigateTo({
							url: `/pages/signUp/sign_confirm?order_id=${order_id}`
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 3000
						})
					}

				})

			},
			toggleTab(str, index) {
				this.selecl_num = index;
				this.$refs[str].show();
			},
			//性别选择
			onSelctXB(e) {
				this.teamlist[this.selecl_num].gender = e.result;
			},
			//服装尺寸
			onSelctXL(e) {
				this.teamlist[this.selecl_num].size = e.result;
			},
			topage(item) {
				uni.navigateTo({
					url: `/pages/signUp/sign_detail?item=${JSON.stringify(item)}`
				})
			},
			tosm() {
				uni.navigateTo({
					url: `/pages/signUp/statement`
				})
			},
			changecheck(row) {
				this.checksm = !row;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.com-box-row {
		display: flex;
		margin-bottom: 30rpx;

		.page-box-label {
			display: flex;
			align-items: center;
			margin-right: 20rpx;
		}

		.page-box-label2 {
			display: flex;
			flex: 1;
		}
	}

	.icon-b {
		margin-right: 20rpx;
		transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		/* Internet Explorer 9*/
		-moz-transform: rotate(90deg);
		/* Firefox */
		-webkit-transform: rotate(90deg);
		/* Safari 和 Chrome */
		-o-transform: rotate(90deg);
		/* Opera */
	}

	.team-name {
		font-size: 32rpx;
		font-weight: bold;
		color: #333
	}

	.input-box {
		border: 1rpx solid #CCCCCC;
		border-radius: 5rpx;
		height: 66rpx;
		width: 100%;
		padding: 0 20rpx;
	}

	.team-name {
		font-size: 32rpx;
		font-weight: bold;
		color: #333
	}

	.icon-check {
		width: 30rpx;
		height: 30rpx;
		margin-right: 20rpx;
	}

	.page-top-tit-icon {
		color: #FE5050;
		margin-right: 20rpx;
	}

	.page-content {
		display: flex;
		flex-direction: column;
		background-color: #f5f5f5;
	}

	.page-top {
		display: flex;
		flex-direction: column;
		background: #fff;
		padding: 30rpx;
		margin-bottom: 20rpx;

		.page-top-o {
			margin-bottom: 30rpx;
			padding-bottom: 30rpx;
			display: flex;
			flex: 1;
			justify-content: space-between;
			border-bottom: 1rpx solid #f5f5f5;


			.page-top-l {
				display: flex;
				width: 216rpx;
				height: 130rpx;
				margin-right: 27rpx;

				.page-top-img {
					width: 216rpx;
					height: 130rpx;
					background-color: rgba(100,100,100,.1);
				}
			}

			.page-top-r {
				width: calc(100% - 240rpx);
				display: flex;
				flex-direction: column;
				line-height: 40rpx;

				.page-top-r-tit {
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-size: 32rpx;
					font-weight: bold;
					color: #333333;
					margin-bottom: 20rpx;
				}

				.page-top-r-box {
					display: flex;
					justify-content: space-between;
					font-size: 32rpx;
					font-weight: 500;

					.page-top-r-team {
						color: #333333
					}

					.page-top-r-mon {
						color: #FE5050;
					}
				}
			}
		}

		.page-top-t {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.page-top-tit {
				line-height: 30rpx;
				font-size: 32rpx;
				font-weight: 500;
				color: #333333;

				.page-top-label {
					display: flex;
					align-items: center;
				}
			}
		}
	}

	.page-body {
		display: flex;
		flex-direction: column;
		margin-bottom: 100rpx;

		.page-box {
			display: flex;
			flex-direction: column;
			background: #fff;
			margin-bottom: 20rpx;
			padding: 30rpx 30rpx 0 30rpx;
			.chicun{
				width: 100%;
				height: 517rpx;
			}

			.page-box-team {
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;
			}

			.com-box-row {
				display: flex;
				margin-bottom: 30rpx;

				.page-box-label {
					display: flex;
					align-items: center;
				}

				.page-box-label2 {
					display: flex;
					flex: 1;
				}

				.page-box-label3 {
					display: flex;
					justify-content: space-between;
					align-items: center;
					flex: 1;
					border: 1rpx solid #CCCCCC;
					border-radius: 5rpx;
					height: 66rpx;
					padding: 0 20rpx;
				}
			}

		}

		.list-li {
			background-color: #fff;
			height: 90rpx;
			padding: 0 30rpx;
			border-radius: 10rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;

			.list-li-l {
				display: flex;
				font-size: 28rpx;

				.list-li-l-tit {
					margin-right: 20rpx;
					font-weight: bold;
					color: #333333;
				}

				.list-li-l-mon {
					font-weight: bold;
					color: #FE5050;

				}
			}
		}
	}

	.page-foot {
		position: fixed;
		bottom: 0;
		text-align: center;
		line-height: 100rpx;
		font-size: 36rpx;
		font-weight: boldl;
		height: 100rpx;
		width: 100%;
		z-index: 4;
	}
</style>
